<template>
  <div class="heigth-fill flex text-center justify-center">
    <div class="flex justify-center align-center text-center padding-sm">
      <div class="flex justify-center" style="background-color: white;">
        <div>
          <img style="width: 800px;height: 100%;" src="@/assets/login_bg.jpg" alt="">
        </div>
        <div class="login-box">
          <div class="content">
                <h3 style="color: green;">VMESHOU FLAG</h3>
                <h4 >运营管理系统</h4>
                <el-form :model="formData" :rules="rules" ref="ruleFormRef" :label-width="formLabelWidth">
                  <el-form-item prop="username">
                      <el-input style="width:300px;" type="text" clearable v-model="formData.username" placeholder="请输入账户名称">
                        <template #prefix>
                          <i class="iconfont icon-user"> </i>
                        </template>
                      </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                      <el-input style="width:300px;" type="password" clearable v-model="formData.password" placeholder="请输入账户密码">
                        <template #prefix>
                          <i class="iconfont icon-lock"> </i>
                        </template>
                      </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-checkbox v-model="formData.record" label="记住账号密码" size="large" />
                  </el-form-item>
                  <el-form-item>
                      <el-button type="primary" style="width: 100%" @click="submitForm">登录</el-button>
                  </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import useCurrentInstance from "@/common/useCurrentInstance";
import {fromPwd, fromLength,fromPhone,fromNumber,fromRequired } from '@/common/fromRole';
import { reactive,computed,ref,onMounted,getCurrentInstance,unref } from 'vue';
import { useAppStore } from '@/store/modules/app';
import { useUserStore } from '@/store/modules/user';
import { useRouter, useRoute, useLink } from "vue-router";
import { ElLoading } from 'element-plus'
import SparkMD5 from 'spark-md5';
import { ElNotification } from 'element-plus';
import { Response } from "./types/login";
import type { FormInstance,FormRules } from 'element-plus';

const router = useRouter();
const appStore = useAppStore();
const userStore = useUserStore();
const { proxy } = useCurrentInstance();

const {login,currentMenu} = proxy.$api.account;

const formLabelWidth=ref('0px');

const formData = reactive({
    username: "",
    password: "",
    record:false,
    client_id: 11,
    client_secret: 22,
})

const rules = reactive<FormRules>({
    username: fromRequired('请输入账户名称'),
    password: fromRequired('请输入账户密码'),
})

const fullLoading=ref(false);
const spark = new SparkMD5.ArrayBuffer();// md5的ArrayBuffer加密类
const onSubmit = () => {
    const loading = ElLoading.service({
      lock: true,
      text: "登录中...",
      // background: "rgba(255,255,255,0.7)"
      background: "rgba(0, 0, 0, 0.7)",
    })
    setTimeout(()=>{
      loading.close();
    },3000)
    let ruleForm = JSON.parse(JSON.stringify(formData));
    // console.info('formData',formData);
    spark.append(ruleForm);
    ruleForm.password = spark.end();
    // console.info('ruleForm',ruleForm);
    // return;
    login(formData).then((res: Response) => {
      loading.close();
      appStore.addRecord({username:formData.username,password:formData.password,record:formData.record});
      let result = res.data;
      userStore.addUserSetting(result.info);
      appStore.addToken(result.token);
      init();
    }).catch((err: Response) => {
      loading.close();
    });
}

// 初始化路由
const init=()=>{
  currentMenu({token:appStore.token}).then((response: Response) => {
    console.info('初始化菜单！');
    if(response.data.length==0){
      return ElNotification({
          title: '提示',
          message: '请配置好菜单权限！',
          type: 'warning',
      });
    }
    let baseMenu: any = [
        {
          parentMenuId: null,
          path: '/dashboard',
          url: '/dashboard/index.vue',
          name: '控制台',
          icon: 'icon-menu',
          menuId: 999999,
          menu: true,
          createTime: '2020-10-20',
          weight: 1,
          childs: [],
          fun: []
        }
    ];
    let menuList = baseMenu.concat(response.data);
    appStore.addMenuList(menuList);
    appStore.addMenuActive(menuList[0].menuId);
    appStore.addNav({name:menuList[0].name,menuId:menuList[0].menuId,path:menuList[0].path});
    appStore.addRouteHas(true);
    router.push({
      path: "/dashboard",
      query: {}
    });
  }).catch((err: Response) => {
    console.log(err);
  });
  
}

onMounted(() => {
  console.info('登录页面。。。');
  if(appStore.login.record){
    formData.username=appStore.login.username;
    formData.password=appStore.login.password;
    formData.record=appStore.login.record;
  }
})

const ruleFormRef = ref<FormInstance>();
const submitForm = () => {
    ruleFormRef.value.validate((valid:any) => {
      if (!valid) return;
      onSubmit();
    });
}

</script>
<style lang="scss" scoped>
.heigth-fill{
  background: -webkit-linear-gradient(#0a0e19, #373e51);
}
.login-box{
    display: flex;
    align-items: center;
    
    .content{
      padding: 110px 50px 110px;
    }
}
</style>
